<script setup lang="ts">
const emits = defineEmits(['change'])
const fileObj = ref({
  name: '',
  url: '',
  tempFilePath: '',
  tempFile: null,
})
function handleChooseImg() {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      console.log(res)
      if (res.tempFilePaths) {
        fileObj.value.tempFilePath = res.tempFilePaths[0]
      }
      if (res.tempFiles) {
        fileObj.value.tempFile = res.tempFiles[0]
      }
      emits('change', fileObj.value)
    },
  })
}
</script>

<template>
  <view @click="handleChooseImg">
    <view
      v-if="!fileObj.tempFilePath && !fileObj.url"
      hover-class="icon-hover"
      class="box-border h-[42px] w-[56px] flex flex-col items-center justify-center border-[#D9D9D9] rounded-sm border-dashed bg-[#FAFAFA] pb-1"
    >
      <wd-icon name="add" size="10px" color="#333" class="h-[20px]" />
      <text class="text-[10px] text-main leading-none">上传图片</text>
    </view>
    <view v-else class="h-[42px] w-[56px]">
      <wd-img :src="fileObj.tempFilePath || fileObj.url" :width="56" :height="42" :radius="5" />
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
